import React from "react";
// 获取文件声明类型
import type business from "@/types/business";

type guestValue = {
  nickname: string;
  mobile: string;
  gender: string;
};

const GuestAdd = () => {
  const [form] = React.UI.Form.useForm();
  // 获取全局挂载的客户信息
  const [business] = useState<business>(React.business);

  // 表单提交事件
  const OnSubmit = async (values: guestValue) => {
    // 组装参数
    const params = {
      busid: business.id,
      nickname: values.nickname,
      mobile: values.mobile,
      gender: values.gender
    };
    // 发起请求
    const result = await React.Http.post("/guest/add", params);
    if (result.code === 1) {
      React.success(result.msg, () => {
        React.navigate(-1);
      });
    } else {
      React.fail(result.msg);
    }
  };

  return (
    <>
      <React.UI.Form
        initialValues={{ mobile: '', nickname: '' }}
        form={form}
        layout="horizontal"
        onFinish={OnSubmit}
        footer={
          <React.UI.Button block type='submit' color='primary' size='large'>
            提交
          </React.UI.Button>
        }
      >
        {/* 昵称 */}
        <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
          <React.UI.Input placeholder="请输入昵称" />
        </React.UI.Form.Item>

        {/* 手机号码 */}
        <React.UI.Form.Item name="mobile" label="手机号码" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
          <React.UI.Input placeholder='请输入手机号' />
        </React.UI.Form.Item>

        {/* 性别 */}
        <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
          <React.UI.Radio.Group>
            <React.UI.Space direction='horizontal'>
              <React.UI.Radio value='0'>女</React.UI.Radio>
              <React.UI.Radio value='1'>男</React.UI.Radio>
            </React.UI.Space>
          </React.UI.Radio.Group>
        </React.UI.Form.Item>
      </React.UI.Form>
    </>
  )
}

export default GuestAdd;